<template>
	<view class="page">

		<chelianghegezheng ref="chelianghegezheng" />
		<view class="tip" style="margin-top: 68rpx;">
			<text style="color: red; margin-top: 15rpx; margin-right: 8rpx;font-size: 28rpx;">*</text><text>请如实上传您的<text
					style="color: red;">购车发票</text>，会影响您的请款时效。</text>
		</view>
		<view class="" style="display: flex;">
			<gouchepiao ref="gouchepiao" />
		</view>
		<view class="tip" style="margin-top: 68rpx;">
			<text style=" margin-top: 15rpx; margin-right: 8rpx;font-size: 28rpx;">*</text><text>请如实上传您的<text
					style="color: red;">交强险保单pdf</text>，会影响您的请款时效。</text>
		</view>
		<view class="" style="display: flex;">
			<jiaoqiangxian ref="jiaoqiangxian" />
		</view>

		<view class="tip" style="margin-top: 68rpx;">
			<text style="margin-top: 15rpx; margin-right: 8rpx;font-size: 28rpx;">*</text><text>请如实上传您的<text
					style="color: red;">盗强险保单pdf</text>，会影响您的请款时效。</text>
		</view>
		<view class="" style="display: flex;">
			<daoqiangxian ref="daoqiangxian" />
		</view>
		<qita ref="qita"></qita>





		<view class="tip" style="margin-top: 68rpx;">
			<text style=" margin-top: 15rpx; margin-right: 8rpx;font-size: 28rpx;">*</text><text>请款备注</text>
		</view>
		<view class="" style="display: flex;">
			<!-- <gouchepiao ref="gouchepiao" /> -->
			<textarea placeholder="请填写请款备注" v-model="form.qingkuanRemark"
				style="border: 2px solid #eee;width: 100%;padding: 20rpx;box-sizing: border-box;"></textarea>
		</view>


		<view class="but">
			<u-button
				:customStyle="{border:'none',background: '#0079FE',width:'686rpx',color:'#fff',height:'90rpx',fontSize:'30rpx',borderRadius:'15rpx'}"
				@click="submit">提交
			</u-button>
		</view>
	</view>
</template>

<script>
	import chelianghegezheng from "./uploadFile/che_liang_he_ge_zhang.vue";
	import gouchepiao from "./uploadFile/gou_che_piao.vue";
	import qita from "./uploadFile/qitaflie.vue";
	import daoqiangxian from "./uploadFile/dao_qiang_xian.vue";
	import jiaoqiangxian from "./uploadFile/jiao_qiang_xian.vue";


	export default {
		components: {
			chelianghegezheng,
			gouchepiao,
			qita,
			daoqiangxian,
			jiaoqiangxian,
		},
		data() {
			return {
				type: null,
				reg: /^\d+$/,
				workflowWater: [],
				otherImg: [],
				form: {
					id: null,
				},
				showDatather:{
					vqc:[],
					cpi:[],
					ctippdf:[],
					qingkuanOther:[],
					tarppdf:[]
				}
			}
		},
		created() {},
		onLoad(options) {
			this.form.id = options.id
			this.getDateShow()
		},
		methods: {
			// 示例图预览
			showImg(path) {
				console.log(path);
				uni.previewImage({
					urls: [...path]
				})
			},
			// 提交
			submit() {
				if (this.$refs.chelianghegezheng.ImageData.length <= 0) {
					this.$ToastFail('请先上传车辆合格证再提交')
					return
				}
				if (this.$refs.gouchepiao.ImageData.length <= 0) {
					this.$ToastFail('请先上传购车发票本再提交')
					return
				}
				// if (this.$refs.jiaoqiangxian.fileList1.length <= 0) {
				// 	this.$ToastFail('请先上传交强险再提交')
				// 	return
				// }
				// if (this.$refs.daoqiangxian.fileList1.length <= 0) {
				// 	this.$ToastFail('请先上传盗强险再提交')
				// 	return
				// }



				var arr1 = this.$refs.chelianghegezheng.ImageData.map(d => {
					return d.path
				})
				var arr2 = this.$refs.gouchepiao.ImageData.map(d => {
					return d.path
				})
				var arr3 = this.$refs.jiaoqiangxian.ImageData.map(d => {
					return d.path
				})
				var arr4 = this.$refs.qita.ImageData.map(d => {
					return d.path
				})
				var arr7 = this.$refs.daoqiangxian.ImageData.map(d => {
					return d.path
				})


				this.form.vqc = arr1.join(',')
				this.form.cpi = arr2.join(',')
				this.form.ctippdf = arr3.join(',')
				this.form.qingkuanOther = arr4.join(',')
				this.form.tarppdf = arr7.join(',')
				this.showDatather.vqc = this.$refs.chelianghegezheng.ImageData
				this.showDatather.cpi = this.$refs.gouchepiao.ImageData
				this.showDatather.ctippdf = this.$refs.jiaoqiangxian.ImageData
				this.showDatather.qingkuanOther =  this.$refs.qita.ImageData
				this.showDatather.tarppdf = this.$refs.daoqiangxian.ImageData
				this.form.showDatather = `${JSON.stringify(this.showDatather)}`
				uni.showModal({
					title: '提示',
					// 提示文字
					content: '您确认要提交吗？',
					// 取消按钮的文字自定义
					cancelText: "取消",
					// showCancel: false,
					// 确认按钮的文字自定义
					confirmText: "确认",
					//删除字体的颜色，颜色最好是十六进制，不然程序发布上线会出问题
					confirmColor: '#ef111b',
					//取消字体的颜色
					cancelColor: '#000000',
					success: function(res) {
						//变量接this
						var that = this
						if (res.confirm) {
							// 执行确认后的操作
							that.submitApi()
						} else {
							// 执行取消后的操作
						}
					}.bind(this)
				})
			},
			// 提交
			async submitApi() {
				uni.showLoading({
					mask: true
				})
				const res = await this.$post(`/biz/wxInstallment/qingkuanSubmit`, this.form)
				if (res.statusCode == 200) {
					this.$ToastOk('提交成功')
					this.$refs.chelianghegezheng.ImageData = []
					this.$refs.gouchepiao.ImageData = []
					this.$refs.jiaoqiangxian.ImageData  = []
					this.$refs.qita.ImageData = []
					this.$refs.daoqiangxian.ImageData = []
					setTimeout(() => {
						var pages = getCurrentPages()
						var prevPage = pages[pages.length - 2]
						prevPage.$vm.$refs.detail.getInstallment()
						console.log(prevPage.$vm.$refs.detail.id, '1111111');
						uni.navigateBack({
							delta: 1
						})
					}, 1000)

				} else {
					this.$ToastFail("提交失败,请重试")
				}
			},
			// 数据回显
		async	getDateShow() {
				var pagesss = getCurrentPages()
				var prevPage = pagesss[pagesss.length - 2]
				// 当订单状态等于14时才去请求接口
				if(prevPage.$vm.$refs.detail.form.applyStatus == 14) {
					const res = await this.$post(`/biz/wxInstallment/qingkuanDetail`, {
						id:prevPage.$vm.$refs.detail.id
					}).then(res => {
						if (res.statusCode == 200) {
							console.log(res,'resresres');
							this.form = {
								...res.data.data
							}
							this.$refs.chelianghegezheng.ImageData = JSON.parse(res.data.data.showDatather).vqc
							this.$refs.gouchepiao.ImageData = JSON.parse(res.data.data.showDatather).cpi
							this.$refs.jiaoqiangxian.ImageData  = JSON.parse(res.data.data.showDatather).ctippdf
							this.$refs.qita.ImageData = JSON.parse(res.data.data.showDatather).qingkuanOther
							this.$refs.daoqiangxian.ImageData = JSON.parse(res.data.data.showDatather).tarppdf
						}
					})
				}
	
			}
		}
	}
</script>

<style>
	.items {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 31rpx;
		box-sizing: border-box;
		width: 100%;
		height: 97rpx;
		border-bottom: 2rpx solid #F4F4FA;
		/* background-color: aqua; */
	}

	.bi_tian {
		display: inline-block;
		color: red;
		margin: 10rpx 10rpx 0 0;
	}

	.items_left {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		font-size: 28rpx;
		font-family: 'PingFang SC-Regular, PingFang SC';
		font-weight: 400;
		color: #1A1824;

	}

	.items_rght_tips {
		font-size: 28rpx;
		font-family: 'PingFang SC-Regular, PingFang SC';
		font-weight: 400;
		color: #9D9D9D;
	}

	.page {
		overflow-y: hidden;
		width: 100%;
		/* height: 100vh; */
		background-color: #fff;
		padding: 0 30rpx 102rpx;
		box-sizing: border-box;
	}

	.tip {
		display: flex;
		align-items: center;
		font-size: 24rpx;
		font-family: 'PingFang SC-Regular, PingFang SC';
		font-weight: 400;
		color: #B1B1B1;
		margin-top: 24rpx;
	}

	.uploaad {
		width: 690rpx;
		/* height: 297rpx; */
		background: #F9F9F9;
		border-radius: 15rpx 15rpx 15rpx 15rpx;
		margin-top: 32rpx;
	}

	.uploaad {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.icon {
		font-size: 108rpx;
		font-family: 'Rubik-Regular, Rubik';
		font-weight: 400;
		color: #C4C4C4;
	}

	.items {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 31rpx;
		box-sizing: border-box;
		width: 100%;
		height: 97rpx;
		border-bottom: 2rpx solid #F4F4FA;
		/* background-color: aqua; */
	}

	.items_left {
		font-size: 24rpx;
		font-family: 'PingFang SC-Regular, PingFang SC';
		font-weight: 400;
		color: #1A1824;

	}

	.fenGe {
		width: 690rpx;
		height: 15rpx;
		background: #F4F4FA;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.tishi {
		height: 66rpx;
		font-size: 24rpx;
		font-family: 'PingFang SC-Regular, PingFang SC';
		font-weight: 400;
		color: #B1B1B1;
	}

	.xie_yi {
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		height: 66rpx;
		font-size: 24rpx;
		font-family: 'PingFang SC-Regular, PingFang SC';
		font-weight: 400;
		color: #B1B1B1;
		margin: 34rpx 0 76rpx;
	}

	.items_rght_tips {
		font-size: 28rpx;
		font-family: 'PingFang SC-Regular, PingFang SC';
		font-weight: 400;
		color: #9D9D9D;
	}

	.but {
		/* position: fixed; */
		/* bottom: 196rpx; */
		margin-top: 30rpx;
	}

	.newuploaad {
		display: flex;
		align-items: flex-start;
		justify-content: flex-start;
		flex-wrap: wrap;
		margin-top: 32rpx;
	}

	.items {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 31rpx;
		box-sizing: border-box;
		width: 100%;
		height: 97rpx;
		border-bottom: 2rpx solid #F4F4FA;
		/* background-color: aqua; */
	}

	.items_left {
		font-size: 26rpx;
		font-family: 'PingFang SC-Regular, PingFang SC';
		font-weight: 400;
		color: #1A1824;

	}

	.shilitu {
		text-align: center;
		line-height: 145rpx;
		width: 145rpx;
		height: 145rpx;
		font-size: 24rpx;
		background-color: #f4f5f7;
	}

	.remark {}
</style>